<!--
 * @Description: 工程管理
 * @Date: 2022-08-27 16:10:03
 * @LastEditTime: 2022-09-08 15:38:43
 * @FilePath: \vue3-ts-vite-pinia\src\pages\am\engineer\List.vue
-->
<template>
    <div class="engineerList">
        <!-- 数据表 -->
        <el-row>
            <el-col :span="24">
                <Table :listData="listData" :tableHeader="tableHeader" :listLoading="false" />
            </el-col>
        </el-row>

        <!-- 分页 -->
        <el-row justify="end">
            <el-col :span="8">
                <Pagination class="page" small :currentPage="searchObject.page" :pageSize="searchObject.pageSize"
                    :total="paginationObject.total" @handleSizeChange="onHandleSizeChange"
                    @handleCurrentChange="onHandleCurrentChange" :pageSizeArray="paginationObject.pageSizeArray" />
            </el-col>
        </el-row>

        <!-- 模态框    -->
        <Model :dialogVisible="dialogOptions.dialogVisible" :title="dialogOptions.title" @handleClose="onHandleClose">
            <Form :form="rowData" :fieldList="fieldList" @handleClose="onHandleClose"
                @handleComfirm="onHandleComfirm" />
        </Model>
    </div>
</template>

<script setup lang="ts">
import Table from "@/components/table/table.vue";
import Pagination from "@/components/pagination/pagination.vue";
import Model from "@/components/Model/model.vue";
import Form from "@/components/Form/Form.vue";
import { pageQueryEngineer, saveEngineer } from "@/api/engineer";
import { queryCharge } from "@/api/user"
import { onMounted, reactive, ref, onBeforeMount, toRaw } from "vue";
import { ElMessage } from "element-plus"
const handletoHandle = (row: any) => {
    console.log(row)
}
let dialogOptions = ref({
    title: "调整设备",
    dialogVisible: false
})
let dialogVisible = ref(false)

let rowData = ref({})
const handleEdit = (row: any) => {
    dialogOptions.value.dialogVisible = true;
    rowData.value = { ...row }
}
const onHandleClose = () => {
    dialogOptions.value.dialogVisible = false;
}
const onHandleComfirm = async (val: any) => {
    const data = await saveEngineer(val)
    await getEngineer()
    dialogOptions.value.dialogVisible = false;
    ElMessage({
        message: '操作成功',
        type: 'success',
    })

    console.log(data)
}



const paginationObject = ref({
    small: false,
    total: 0,
    pageSizeArray: [6, 8, 10, 12]
})

const searchObject = ref({   //查询条件
    page: 1,
    pageSize: 10
})

let listData = ref([]) //设备数据
const getEngineer = async () => {
    const { data: {
        list, total
    } } = await pageQueryEngineer(searchObject.value)
    listData.value = list
    paginationObject.value.total = total
}
// 表头
const tableHeader = reactive([
    {
        label: "工程编号",
        prop: "serial_number",
        minWidth: "80px"
    },
    {
        label: "工程名称",
        prop: "name",
        minWidth: "180px"
    },
    {
        label: "状态",
        prop: "status",
        minWidth: "80px",
        isTags: true,
        formatter: (val: string) => {
            return val == '监测中' ? 'success' : val == '未绑定' ? 'info' : 'danger'
        }
    },
    {
        label: "工程类型",
        prop: "type",
        minWidth: "80px"
    },
    {
        label: "区域经理",
        prop: "charge_name",
        minWidth: "80px"
    },
    {
        label: "客户",
        prop: "customer_name",
        minWidth: "80px"
    },
    {
        label: "联系方式",
        prop: "customer_telephone",
        minWidth: "80px"
    },
    {
        prop: "operate",
        label: "操作",
        minWidth: "180px",
        btn: [{
            type: 'success',
            name: "修改",
            func: handleEdit
        }, {
            type: "primary",
            name: "绑定",
            func: handletoHandle
        }]
    }

])
// 当前页
const onHandleCurrentChange = (page: number) => {
    searchObject.value.page = page
    getEngineer()
}
// 当前页数

const onHandleSizeChange = (pageSize: number) => {
    searchObject.value.pageSize = pageSize
    getEngineer()
}

let fieldList: any = ref([
    { index: 1, type: 'input', label: '工程编号', field: 'serial_number' },
    { index: 3, type: 'input', label: '工程名称', field: 'name' },
    { index: 4, type: 'select', label: '工程类型', field: 'type', options: [{ label: '写字楼', value: '写字楼' }, { label: '园区', value: '园区' }, { label: '景区', value: '景区' }] },
    { index: 5, type: 'input', label: '工程地址', field: 'address' },
    { index: 6, type: 'input', label: '客户姓名', field: 'customer_name' },
    { index: 7, type: 'input', label: '客户联系方式', field: 'customer_telephone' },
])
// 查询区域经理 
const onQueryCharge = async () => {
    let obj = {
        page: 1,
        pageSize: 100,
        role_id: "3"
    }
    const {
        data: {
            list
        }
    } = await queryCharge(obj)
    const areaManager = list.map((item: any) => {
        return { label: item.realname, value: item.id }
    })
    let fieldItem = {
        index: 2, type: 'select', label: "区域经理", field: 'charge_id', options: areaManager,
    }
    fieldList.value.push(fieldItem)
    fieldList.value.sort((a: any, b: any) => {
        return a.index - b.index
    })
    // if (fieldList.value.length > 0) {
    //     fieldList.value = computed(() => {
    //         return fieldList.value.sort((a: any, b: any) => {
    //             return a.index - b.index
    //         })
    //     })
    // }

}

onMounted(async () => {
    await getEngineer()
    await onQueryCharge()
})
</script>

<style scoped>
.page {
    position: absolute;
    top: 10px;
    right: 5px;
}
</style>